<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
</body>


<style>
    .box {
        --c: (400px - 100vw);
        /* we define our condition */

        top: clamp(10%, var(--c)*-1000, 50%);
        left: clamp(0px, var(--c)*1000, 40%);

        position: fixed;
        width: 100px;
        height: 100px;
        background:
            linear-gradient(green 0 0) 0 /max(0px, var(--c)) 1px,
            red;

    }
</style>

</html>